<template>
<transition name="slide">
    <aside class="m-sidebar">
            <div class="sidebarPannel">
                <div class="content_pannel">
                    <screenItem title="学术研究领域" :myData='firsthandData.themes' v-on:onclick='userdata'></screenItem>
                    <screenItem title="检索类型" :myData='firsthandData.ptype' v-on:onclick='userdata'></screenItem>
                    <article class="input_date-meeting">
                        <header>
                            <h3>
                                会议日期
                            </h3>
                        </header>
                        <div class="m-datepicker">
                            <mt-button class="u-btn-defalut u-btn-defalut2" type="default" @click.stop="openPicker1()" >{{datePickerStr("开始日期",userSubmitData.meetingdate.dateStart)}}</mt-button>
                            <span>-</span>
                            <mt-button class="u-btn-defalut u-btn-defalut2" type="default" @click.stop="openPicker2()" :disabled="disabled_meetingDate_end">{{datePickerStr("结束日期",userSubmitData.meetingdate.dateEnd)}}</mt-button>
                        </div>
                        
                        <ul>
                            <li :key="item.key" :class="{'u-btn-defalut u-btn-defalut3':true,active: item.isHightlight}" v-for="item in meetingDateRange" @click="onSelectDate(item)">
                                <label :for="item.id">{{item.value}}
                                </label>
                            </li>
                        </ul>
                    </article>
                    <article class="input_date-deadline">
                        <header>
                            <h3>截稿日期</h3>
                        </header>
                        <div class="m-datepicker">
                            <mt-button class="u-btn-defalut u-btn-defalut2" type="default" @click.stop="openPicker3()">{{datePickerStr("开始日期",userSubmitData.dateDeadline.dateStart)}}</mt-button>
                            <span>-</span>
                            <mt-button class="u-btn-defalut u-btn-defalut2" type="default" @click.stop="openPicker4()" :disabled="disabled_dateDeadline_end">{{datePickerStr("结束日期",userSubmitData.dateDeadline.dateEnd)}}</mt-button>
                        </div>
                        <ul>
                            <li :key="item.key" :class="{'u-btn-defalut u-btn-defalut3':true,active: item.isHightlight}" v-for="item in dateDeadlineTime" @click="onSelectDeadline(item);">
                                <label :for="item.id">{{item.value}}</label>
                            </li>
                        </ul>
                    </article>
                    <screenItem title="开会城市" :myData='firsthandData.city' v-on:onclick='userdata'></screenItem>
                    <div class="footer">
                        <mt-button type="danger" size="normal" @click="reset">重置</mt-button>
                        <mt-button type="primary" size="normal" @click="onSubmit" ref="submitBtn" :disabled='disabled_submit'>确定</mt-button>
                    </div>
                </div>
            </div>
        <mt-datetime-picker
                class="pickerDefalut"
                ref="mds"
                v-model='cmds'
                type="date"
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日"
                @confirm= 'handleConfirm1'>
        </mt-datetime-picker>
        <mt-datetime-picker
                class="pickerDefalut"
                ref="mde"
                v-model='cmde'
                type="date"
                :startDate = 'cmd_interval'
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日"
                @confirm= 'handleConfirm2'>
        </mt-datetime-picker>
        <mt-datetime-picker
                class="pickerDefalut"
                ref="dds"
                v-model='cdds'
                type="date"
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日"
                @confirm= 'handleConfirm3'>
        </mt-datetime-picker>
        <mt-datetime-picker
                class="pickerDefalut"
                ref="dde"
                v-model="cdde"
                type="date"
                :startDate = 'cdd_interval'
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日"
                @confirm= 'handleConfirm4'>
        </mt-datetime-picker>
    </aside>
</transition>
</template>

<style lang="scss" scoped src="./index.scss">

</style>
<style>
    .mint-button--primary{
        color: #fff;
        background-color: #557ae4;
    }
    .mint-button--danger{
        color: #fff;
        background-color: #ff555b;
    }
</style>

<script>
import { Toast } from 'mint-ui'
import screenItem from './screenItem.vue'
import { GetCondition } from '@/api/http.js'
import { nextTick } from 'async';

export default {
    created(){
        //打开页面数据列表获取
        GetCondition()
        .then(res=>{
            //得到的数据添加自定义高亮属性
            for( let i in res){
                res[i].forEach(el=>{
                    el.isHightlight = false
                })
                res[i].unshift(
                    {value:'不限',id:'不限',isHightlight:true},
                )
            }
            return this.firsthandData = res
        })
    },
    components:{
        screenItem
    },
    data: function(){
        return{
            cmds: new Date,
            cmd_interval: new Date,
            cmde: new Date,
            cdds: new Date,
            cdd_interval: new Date,
            cdde: new Date,
            disabled_meetingDate_end: true,
            disabled_dateDeadline_end: true,
            disabled_submit: false,
            //方便计算属行
            formatDate: (new Date).getTime()/1000,
            //提交筛选的数据格式
            userSubmitData: {
                lp:1,
                choseTerritory: '不限',
                choseType: '不限',
                choseLocale: '不限',
                meetingdate: {
                    dateStart: null,
                    dateEnd: null,
                    daterange: null
                },
                dateDeadline: {
                    dateStart: null,
                    dateEnd: null,
                    daterange: null
                }
            },

            //筛选功能数据
            firsthandData:{
                themes:[],
                ptype:[],
                city:[]
            },
            
            //筛选功能时间拾取器的快捷选择
            meetingDateRange: [
                {value:'7天内',isHightlight:false,id:'ditem1',time:604800},
                {value:'15天内',isHightlight:false,id:'ditem2',time:1296000},
                {value:'一个月内',isHightlight:false,id:'ditem3',time:2592000},
            ],
            dateDeadlineTime: [
                {value:'15天内',isHightlight:false,id:'dlitem1',time:1296000},
                {value:'一个月内',isHightlight:false,id:'dlitem2',time:2592000},
                {value:'三个月内',isHightlight:false,id:'dlitem3',time:7776000},
            ]
        }
    },
    methods:{
        // 点击数据列表时把该数据写入this.userSubmitData
        userdata(itemVal){
            switch(itemVal.source){
                case this.firsthandData.themes:
                    this.userSubmitData.choseTerritory = itemVal.id
                    break;
                case this.firsthandData.ptype:
                    this.userSubmitData.choseType = itemVal.id
                    break;
                case this.firsthandData.city:
                    this.userSubmitData.choseLocale = itemVal.value
                    break;
                default:
                    break;
            } 
        },
        //重置按钮，会重置this.usersubmitdata，也会重置该组件的
        reset(){
            // 高亮重置
            for(var i in (this.firsthandData)){
                (this.firsthandData[i]).forEach(el => el.isHightlight = false)
                this.firsthandData[i][0].isHightlight = true
            }
            this.userSubmitData.choseTerritory = this.firsthandData.themes[0].value
            this.userSubmitData.choseType = this.firsthandData.ptype[0].value
            this.userSubmitData.choseLocale = this.firsthandData.city[0].value
            //快捷选择日期样式初始化
            this.resetDateStyle(this.meetingDateRange)
            this.resetDateStyle(this.dateDeadlineTime)
            //选择日期提交的数据初始化
            this.resetDateData(this.userSubmitData.meetingdate)
            this.resetDateData(this.userSubmitData.dateDeadline)
            this.resetSomeData()
            this.disabled_submit = false
        },
        //初始化筛选数据的高亮条件
        resetDateStyle(data){
            data.forEach(element => {
                element.isHightlight = false
            });
        },
        //初始化日期数据
        resetDateData(route){
            route.daterange = null
            route.dateStart = null
            route.dateEnd = null
        },
        //时间拾取器的快捷列表点击事件，高亮和写入this.userSubmitData，解除提交按钮的disabled状态
        onSelectDate(item){
            this.resetDateStyle(this.meetingDateRange)
            item.isHightlight = !item.isHightlight
            this.resetDateData(this.userSubmitData.meetingdate)
            this.userSubmitData.meetingdate.daterange = item.time+this.formatDate
            this.disabled_submit = false
        },
        onSelectDeadline(item){
            this.resetDateStyle(this.dateDeadlineTime)
            item.isHightlight = !item.isHightlight
            this.resetDateData(this.userSubmitData.dateDeadline)
            this.userSubmitData.dateDeadline.daterange = item.time+this.formatDate
            this.disabled_submit = false
        },
        //提交按钮,提交this.filters给父组件
        onSubmit(){
            if(
                (this.userSubmitData.meetingdate.dateStart && !this.userSubmitData.meetingdate.dateEnd) ||
                (this.userSubmitData.dateDeadline.dateStart && !this.userSubmitData.dateDeadline.dateEnd)
                ){
                Toast("提交的时间格式不对")
                return
            }
            this.$emit('closeFillter',this.userSubmitData)
        },
        //重置一些自定义状态
        resetSomeData(){
            this.disabled_dateDeadline_end = true
            this.disabled_meetingDate_end = true
        },
        //日期选择后展示的字符串
        datePickerStr(val,src){
            if(src === null || src === "" ||src ===undefined){
                return val
            }else{
                return `${new Date(src*1000).getFullYear()}年${new Date(src*1000).getMonth()+1}月`
            }
        },
        // 日期选择器组件绑定
        openPicker1(){
            this.$refs.mds.open();
        },
        handleConfirm1(val){
            this.userSubmitData.meetingdate.dateStart = parseInt((val.getTime())/1000);
            //重置datarange
            this.userSubmitData.meetingdate.daterange = null;
            // 重置高亮条件
            this.resetDateStyle(this.meetingDateRange);
            this.cmd_interval = val
        },
        openPicker2(){
            this.$refs.mde.open();
        },
        handleConfirm2(val){
            this.userSubmitData.meetingdate.dateEnd = parseInt((val.getTime())/1000);
            //重置datarange
            this.userSubmitData.meetingdate.daterange = null
            // 重置高亮条件
            this.resetDateStyle(this.meetingDateRange)
        },
        openPicker3(){
            this.$refs.dds.open();
        },
        handleConfirm3(val){
            this.userSubmitData.dateDeadline.dateStart = parseInt((val.getTime())/1000)
            this.userSubmitData.dateDeadline.daterange = null
            this.resetDateStyle(this.dateDeadlineTime)
            this.cdd_interval = val
        },
        openPicker4(){
            this.$refs.dde.open();
        },
        handleConfirm4(val){
            this.userSubmitData.dateDeadline.dateEnd = parseInt((val.getTime())/1000)
            this.userSubmitData.dateDeadline.daterange = null
            this.resetDateStyle(this.dateDeadlineTime)
        },
    },
    watch:{
        'userSubmitData.meetingdate.dateStart':function(val,newval){
            if(val){
                this.disabled_meetingDate_end = false
                if(!this.userSubmitData.meetingdate.dateEnd){
                    this.disabled_submit = true
                }
            }else{
                this.disabled_meetingDate_end = true
            }
        },
        'userSubmitData.meetingdate.dateEnd':function(val,newval){
            if(
                (!this.userSubmitData.dateDeadline.dateStart&&!this.userSubmitData.dateDeadline.dateEnd)|| 
                (this.userSubmitData.dateDeadline.dateStart&&this.userSubmitData.dateDeadline.dateEnd) ){
                this.disabled_submit = false
            }
        },
        'userSubmitData.dateDeadline.dateStart':function(val,newval){
            if(val){
                this.disabled_dateDeadline_end = false
                if(!this.userSubmitData.dateDeadline.dateEnd){
                    this.disabled_submit = true
                }
            }else{
                this.disabled_dateDeadline_end = true
            }
        },
        'userSubmitData.dateDeadline.dateEnd':function(val,newval){
            if(
                (!this.userSubmitData.meetingdate.dateStart&&!this.userSubmitData.meetingdate.dateEnd)|| 
                (this.userSubmitData.meetingdate.dateStart&&this.userSubmitData.meetingdate.dateEnd) ){
                this.disabled_submit = false
            }
        }
    }
}
</script>

